<template>
  <div ref="container" class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录表单 -->
        <el-form ref="loginForm" v-loading="loading" :model="loginForm" class="sign-in-form" auto-complete="off">
          <h2 class="title">登 录</h2>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="账号">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="username" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" @keyup.enter.native="handleLogin">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="password" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn solid" @click.native.prevent="handleLogin">
              登 录
            </el-button>
          </el-form-item>
          <!-- 第三方账号 -->
          <p class="social-text">Or Sign in with social platforms</p>
          <div class="social-media">
            <a v-for="item in thirdLogin" :key="item" href="#" class="social-icon">
              <svg-icon :icon-class="item" />
            </a>
          </div>
        </el-form>
        <!-- 注册表单 -->
        <el-form ref="registerForm" :model="registerForm" class="sign-up-form" auto-complete="off">
          <h2 class="title">注 册</h2>
          <el-form-item prop="username">
            <el-input v-model="registerForm.username" placeholder="账号">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="username" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="registerForm.email" placeholder="邮箱">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="email" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" type="password" placeholder="密码">
              <template slot="prefix">
                <svg-icon class="form-icon" icon-class="password" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="btn solid" @click.native.prevent="handleSignIn">
              注 册
            </el-button>
          </el-form-item>
          <!-- 第三方登录 -->
          <p class="social-text">Or Sign up with social platforms</p>
          <div class="social-media">
            <a v-for="item in thirdLogin" :key="item" href="#" class="social-icon">
              <svg-icon :icon-class="item" />
            </a>
          </div>
        </el-form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>还没有账号 ？</h3>
          <p>stay hungry stay foolish.</p>
          <p>保持对成功的渴望，保持对事物的好奇</p>
          <button ref="sign-up-btn" class="btn transparent" @click="handleSignUp">
            注 册
          </button>
        </div>
        <img src="@/assets/images/login.svg" class="image" alt="">
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>我们中的一员 ？</h3>
          <p>stay hungry stay foolish.</p>
          <p>保持对成功的渴望，保持对事物的好奇</p>
          <button ref="sign-in-btn" class="btn transparent" @click="handleSignIn">
            登 录
          </button>
        </div>
        <img src="@/assets/images/register.svg" class="image" alt="">
      </div>
    </div>

    <!-- 备案信息 -->
    <div class="footer-copyright">
      <span class="copyright-year">
        <svg-icon icon-class="copyright" /> 2021
      </span>
      图书馆的牧羊人 & 阿伟 |
      <a target="_blank" href="https://beian.miit.gov.cn/">鲁ICP备2021019987号-1</a>
    </div>

    <Verify ref="verify" :img-size="{ width: '330px', height: '155px' }" :captcha-type="'clickWord'" :v-space="16" :mode="'pop'" @success="capctchaCheckSuccess" />
  </div>
</template>

<script>
import { timeFix } from '@/utils/ruoyi'
// 图片点选验证码
import Verify from '@/components/Verifition/Verify'

export default {
  name: 'Login',
  components: { Verify },
  data() {
    return {
      loginForm: {
        username: 'test',
        password: '123456',
        code: ''
      },
      registerForm: {
        username: '',
        email: '',
        password: ''
      },
      // 第三方登录
      thirdLogin: ['qq', 'wecom', 'ding', 'lark'],
      loading: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        this.redirect = route.query && route.query.redirect
      }
    }
  },
  methods: {
    handleSignUp() {
      this.$refs.container.classList.add('sign-up-mode')
    },
    handleSignIn() {
      this.$refs.container.classList.remove('sign-up-mode')
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$refs.verify.show()
        }
      })
    },
    capctchaCheckSuccess(params) {
      this.loading = true
      this.loginForm.code = params.captchaVerification
      this.$store
        .dispatch('Login', this.loginForm)
        .then(() => {
          this.$notify({
            title: '登录成功',
            message: `${timeFix()}，欢迎回来。`,
            type: 'success'
          })
          this.$router.push({ path: this.redirect || '/' }).catch(() => {})
        })
        .catch(() => {
          this.loading = false
          this.$refs.verify.refresh()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/_login.scss';
</style>
